<!--
 * @Descripttion: 
 * @Author: yuxi
 * @Date: 2023-10-02 22:36:52
 * @LastEditors: yuxi
 * @LastEditTime: 2023-10-02 22:41:05
-->
<!--
 * @Descripttion: 
 * @Author: yuxi
 * @Date: 2022-09-15 14:58:04
 * @LastEditors: yuxi
 * @LastEditTime: 2023-10-02 22:35:32
-->
<template>
  <div class="map-container">
    <MiningMap>
      <MiningTiandituLayer 
        :visible="visible"
        layerName="基础底图"
        :ak="key"
        @ready="ready"
      ></MiningTiandituLayer>
      
      <MiningVectorLayer
        :visible="vectorLayerVisible"
        layerName="一级城市"
        :editAble="true"
        :featureStyle="style"
      >
        <MiningPoint
          v-for="(feature, fi) in features"
          :key="fi"
          :feature="feature"
        ></MiningPoint>
      </MiningVectorLayer>
      <MiningLayerControl></MiningLayerControl>
    </MiningMap>
  </div>
</template>

<script>
import MiningMap from 'mining-map/Map'
import MiningTiandituLayer from 'mining-map/Layers/TiandituLayer'
import MiningLayerControl from 'mining-map/Control/LayerControl';  

import MiningVectorLayer from 'mining-map/Layers/VectorLayer'
import MiningPoint from 'mining-map/Features/Point';
import { TiandituKey,CityCoordinates } from '@/config/config.js';

import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import { Style, Icon } from 'ol/style';
import marker from '@/assets/images/marker.png'

export default {
  name: 'layerVisible',
  title: '图层隐藏控制',
  parentTitle: '图层',
  components: {
    MiningMap,
    MiningTiandituLayer,
    MiningLayerControl, 
    MiningVectorLayer,
    MiningPoint

  },
  data () {
    const features = [ CityCoordinates.BeiJing,  CityCoordinates.ShangHai,  CityCoordinates.XiAn].map(coords => new Feature({
      type: 'Point',
      geometry: new Point(coords),
      name: 'City',
    }));

    const style = new Style({
      image: new Icon({
        anchor: [0.5, 46],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        src: marker,
      })
    })
    return {
      features,
      style,
      key: TiandituKey,
      visible: false,
      vectorLayerVisible: true
    }
  },
  mounted () {
    // 用来演示图层显隐
    this.$message.info("基础图层隐藏中...")
    setTimeout(() => {
      this.$message.info("基础图层显示")
      this.visible = true
      setTimeout(() => {
        this.$message.info("矢量图层隐藏...")
        this.vectorLayerVisible = false
        setTimeout(() => {
          this.$message.info("矢量图层显示")
          this.vectorLayerVisible = true
        }, 2000)
      }, 2000)
     
    }, 3000)
  },
  methods: {
    ready () {}
  }

}
</script>

<style>
body,
html {
  padding: 0;
  margin: 0;
}

.map-container {
  width: 100%;
  height: 100vh;
}
</style>